<template>
  <EasyTable
    :data="tableData"
    :default-value="{ name: 'xx', age: 12 }"
    :add-method="handleAddMethod"
    border
    shadow
  >
    <EasyTableColumn type="expand">
      <template #default="props"> </template>
    </EasyTableColumn>

    <EasyTableColumn label="姓名" prop="name"> </EasyTableColumn>

    <EasyTableColumn label="日期" prop="date" v-slot="{ row, index }">
      <EasyInput
        v-model="row.date"
        :index="index"
        size="small"
      ></EasyInput>
    </EasyTableColumn>

    <EasyTableColumn operation label="操作">
      <ElButton size="small" plain>审批</ElButton>
    </EasyTableColumn>
  </EasyTable>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue';

import {
  EasyTable,
  EasyTableColumn,
  EasyInput,
} from '@/components/easy-table';
import { useDataSource } from '@/components/easy-table/src/data-source';

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'view',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'edit',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'solid',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    family: [],
  },
]);

const rows = ref<any>([]);

// watch(
//   tableData,
//   () => {
//     rows.value = tableData.value.map(() => ({
//       edit: false,
//     }));
//   },
//   { immediate: true }
// );

const handleEdit = (index: number) => {
  rows.value[index] = { edit: true };
};
const handleSave = (index: number) => {
  rows.value[index] = { edit: false };
};

const handleAdd = () => {
  tableData.value.push({
    date: '',
    name: '',
    state: '',
    city: '',
    address: '',
    zip: '',
    family: [],
  });
  rows.value.push({ edit: true });
};

const handleDel = (index: number) => {
  // console.log('🚀 ~ handleDel ~ index:', index);
  tableData.value.splice(index, 1);
  rows.value.splice(index, 1);
};

const handleAddMethod = () => {
  return { name: 'add', age: 8 };
};
</script>

<style scoped>
.el-input {
  width: 12rem;
}

.el-link {
  margin: 0 0.15rem;
}
</style>
